<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="css/jquery.fullPage.css">
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style>
			.mui-bar {
				background: rgba(0, 0, 0, .2);
				z-index: 100;
			}
		</style>

	</head>

	<body class="bg_index">
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item1 mui-active" href="index.html">
				<span class="mui-icon"><img src="images/tab_index01.png"/></span>
				<span class="mui-tab-label">拍拍拍</span>
			</a>
			<a class="mui-tab-item1" href="indexRelease.html">
				<span class="mui-icon "><img src="images/tab_index02.png"/></span>
				<span class="mui-tab-label">发布</span>
			</a>
			<a class="mui-tab-item1" href="msg.html">
				<span class="mui-icon"><img src="images/tab_index03.png"/></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item1" href="my.html">
				<span class="mui-icon"><img src="images/tab_index04.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="index_nav text-center">
			<a href="javascript:void(0);" class="active">推荐</a>
			<a href="javascript:void(0);">关注</a>
		</div>
		<div class="index_div active " id="index">
			<ul class="right index_right">
				<li class="mg_top20">
					<a href="javascript:;" class="cp">
						<audio id="audio" autoplay="autoplay" poster='images/bg1.png'>
															<!-- <source src="" type="audio/mp3"></source>  -->
															<!--<source src="video/fcml.wav" type="audio/vnd.wave"></source>-->
														</audio>
						<!-- <audio id="audio" autoplay="autoplay" poster='images/bg1.png'></audio> -->
					</a>
				</li>
				<li class="mg_top40">
					<a href="javascript:void(0);"><img class="head_index" onclick="userData()" workId='' src="images/index_head.png" /></a>
					<p>关注</p>
				</li>
				<li>
					<a href="javascript:void(0);" onclick="praiseWork()"><img class="zan" src="images/index_gz.png" /></a>
					<p class="praiseNum">0</p>
				</li>
				<li class="pl_btn">
					<a href="javascript:void(0);"><img src="images/index_pl.png" /></a>
					<p class="commentNum">0</p>
				</li>
				<li class="share_btn">
					<a href="javascript:void(0);"><img src="images/index_share.png" /></a>
					<p class="shareNum">0</p>
				</li>
				<li>
					<a href="javascript:void(0);" class="download"><img src="images/index_xz.png" /></a>
					<p class="downloadNum">0</p>
				</li>
			</ul>
			<div id="dowebok">
				<div class="section"></div>
				<div class="section"></div>
				<div class="section"></div>
			</div>
		</div>
		<!--关注-->
		<div class="index_div">
			<div class="my_listitem"></div>
		</div>
		<!--分享-->
			
				<div class="text_info absolute">
					<p></p>

                </div>
		<ul class="bottom shore">
			<li>
				<img src="images/qq.png" alt="" />
				<p>QQ</p>
			</li>
			<li>
				<img src="images/pay_wx.png" alt="" />
				<p>微信好友</p>
			</li>
			<li>
				<img src="images/pyq.png" alt="" />
				<p>朋友圈</p>
			</li>
		</ul>
		<div class="overlay"></div>
		<!--评论-->
		<div class="index_pl padding_lr12">
			<p class="text_right padding_10"><img class="close" width="15" src="images/close_small.png" /></p>
			<div class="index_pllist"></div>
			<div class="index_plinput">
				<input type="text" name="" id="" value="" />
				<a href="javascript:void(0);" onclick="commentWork()">评论</a>
			</div>
		</div>
		</div>
		<!-- 喜好弹出 -->
		<div class="like_mask">
			<div class=" mg_top20" id="like_box">
				 <div class="color_55 bold mg_top10 title "></div>
				 <div class="like_box padding_10">
			    	
			    		
			    	
				 </div>
			</div>
			<p class="mg_top40 width90"><a href="javascript:void(0)" class="big_btn refire" onclick="likeBtn()">提交</a></p>
			<p class="mg_top40 width90"><a href="javascript:void(0)" class="big_btn next" onclick="like(page)">下一步</a></p>
			
		</div>
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/jquery.fullPage.min.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/plusshare.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//		
			mui.init()
               
			$(function() {
				document.addEventListener('DOMContentLoaded', function() {
					function audioAutoPlay() {
						var audio = document.getElementById('audio');
						audio.play();
						document.addEventListener("WeixinJSBridgeReady", function() {
							audio.play();
						}, false);
					}
					audioAutoPlay();
				});
				var readNum
				//获取随机翻阅次数
				function getReadNum() {
					$.ajax({
						type: "get",
						url: urlcom + "work/getReadNum",
						async: true,
						dataType: 'json',
						data: {
							userId: localStorage.getItem('userId')
						},
						success: function(res) {
							if(res.code == 0) {
								readNum = res.data.readNum
								console.log(readNum)
							} else {
								msg(res.msg)
							}
				
						}
					});
				
				}getReadNum()
				
					
				var page = 1
				$('#dowebok').fullpage({
					lazyLoading: true,
					onLeave: function(index, nextIndex, direction) {
						var html = ''
						if(direction == 'down') {
							page++
							html += '<div class="section fp-section fp-table" style="height: 667px;"><div class="fp-tableCell" style="height:667px;"></div></div>'
							$("#dowebok").append(html)
							readNum--
							if(localStorage.getItem('isAnswer')==1){
								if(readNum==0){
									$('.like_mask').fadeIn(200)
								}
							}
							
							recommend(1, page)
							document.addEventListener('DOMContentLoaded', function() {
								function audioAutoPlay() {
									var audio = document.getElementById('audio');
									audio.play();
									document.addEventListener("WeixinJSBridgeReady", function() {
										audio.play();
									}, false);
								}
								audioAutoPlay();
							});
							
						} else if(direction == 'up') {
							page--
							if(page == 0) {
								page = 0
							}
							recommend(2, page)
						}
					}
				});

				$('.index_nav a').click(function() {
					var index = $(this).index()
					$(this).addClass('active').siblings().removeClass('active')
					$('.index_div').eq(index).addClass('active').siblings().removeClass('active')
					if(index == 1) {
						$('.bg_index').addClass('bg_ff')
						$(this).parent().addClass('block')
						getFocusWork(1)
					} else {
						$('.bg_index').removeClass('bg_ff')
						$(this).parent().removeClass('block')
					}
				})
				
				
				function shareApp(id,content,bg) {
				
					mui.ajax(urlcom + 'work/integralShare', {
						data: {
							userId: localStorage.getItem('userId'),
							workId:id
						},
						dataType: 'json',
						type: 'post',
						timeout: 10000,
						headers: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							console.log(JSON.stringify(data))
							
//							
						},
						error: function(xhr, type, errorThrown) {
							mui.toast('网络错误');
						}
					});
					var inviteCode =  localStorage.getItem('inviteCode')
					var message = {
						title: '乐拍拍', //应用名字
						content: '这是一款图文分享的App',//介绍
						href: "http://139.9.169.213:8080/dist/download.html"+inviteCode , //分享出去后，点击跳转地址
						thumbs: [bg] ,//分享缩略图
						pictures:[bg]
					}
					//调起分享
					plusShare(message, function(res) {
						//分享回调函数
						if(res) {
							plus.nativeUI.toast("分享成功");
							mui.ajax(urlcom + 'work/integralShare', {
								data: {
									userId: localStorage.getItem('userId'),
									workId:id
								},
								dataType: 'json',
								type: 'post',
								timeout: 10000,
								headers: {
									'content-type': 'application/x-www-form-urlencoded'
								},
								success: function(data) {
									if(data.status == 1) {
										mui.toast('谢谢分享');
										
									}else{
										mui.toast('谢谢分享');
									}
									
								},
								error: function(xhr, type, errorThrown) {
									mui.toast('网络错误');
								}
							});	
						} else {
							plus.nativeUI.toast("分享失败");
						}
					})
				}
				$('.shore li').click(function(){
					shareApp(workId,content,bg)
				})
				//分享
				$(".share_btn").click(function() {
					$('.shore').fadeIn(200)
					$('.overlay').show()
				})
				$('.overlay').click(function() {
					$(this).hide()
					$('.shore').fadeOut(200)
				})
				//			评论
				$(".pl_btn").click(function() {

					$('.index_pl').fadeIn(200)
					$('.overlay').show()
					getCommentList(1)
				})
				$('.overlay').click(function() {
					$(this).hide()
					$('.index_pl').fadeOut(200)
				})
				$('.close').click(function() {
					$('.overlay').hide()
					$('.index_pl').fadeOut(200)
				})
			})
			//首页推荐
			var bg = '',workid='',content = ''
			function recommend(type, pager) {
				$('.gif').show()
				$.ajax({
					type: "post",
					url: urlcom + "work/recommend",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						current: pager,
						type: type
					},
					success: function(res) {
						$('.gif').hide()

						if(res.code == 0) {

							workId = res.data.workId
							bg=res.data.coverImg
							content:res.data.content
							$('.head_index').attr('src', res.data.userHeadImg)
							$('.text_info p').html(res.data.content)
							$('.praiseNum').html(res.data.praiseNum)
							$('.commentNum').html(res.data.commentNum)
							$('.shareNum').html(res.data.shareNum)
							$('.downloadNum').html(res.data.downloadNum)
							$('.bg_index').css({
								'background': 'url(' + res.data.coverImg + ')no-repeat',
								'background-size': 'cover'
							})
							$('.head_index').attr('workId', res.data.workId)
							$('.head_index').attr('workUserId', res.data.workUserId)
							$('.download').attr('downloadUrl', res.data.coverImg)
							
							if(res.data.isPraise == 1) {
								$('.zan').attr('src', 'images/heart.png')
							}
							if(res.data.bgm){
								$('.cp').show()
								$('#audio').attr('src', res.data.bgm)
							}else{
								$('.cp').hide()
								$('#audio').attr('src', '')
							}
										
						} else {
							msg('已经到底了')
						}

					}
				});
			}
			recommend(1, 0)

			function userData() {
				var id = $('.head_index').attr('workId')
				var workUserId = $('.head_index').attr('workUserId')
				if(workUserId==localStorage.getItem('userId')){
					msg('该用户是自己哦！')
				}else{
				window.location.href = 'userData.html?id=' + id+'&&workUserId='+workUserId
					}
				console.log(id)
				//			window.location.href = 'my.html?id'
			}

			//点赞
			function praiseWork() {
				$('.gif').show()
				console.log($('.head_index').attr('workid'))
				
				$.ajax({
					type: "post",
					url: urlcom + "work/praiseWork",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						workId: $('.head_index').attr('workid')
					},
					success: function(res) {
						$('.gif').hide()
						if(res.code == 0) {
							$('.zan').attr('src', 'images/heart.png')
							msg('点赞成功')
						} else {
							msg(res.msg)
						}

					}
				});
			}
			//获取评论列表
			function getCommentList(current) {
				$('.gif').show()
				$.ajax({
					type: "post",
					url: urlcom + "work/getCommentList",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						workId: $('.head_index').attr('workid'),
						current: current,
						size: 10
					}, 
					success: function(res) {
						$('.gif').hide()
						if(res.code == 0) {
							if(res.data.length) {
								var html = '';
								$.each(res.data, function(k, v) {
									html += '<dl class="index_plitem mg_b10">' +
										'<dt><img src="' + v.userHeadimg + '"/></dt>' +
										'<dd>' +
										'<p class="color_25 bold">' + v.userName + '</p>' +
										'<h6 class="color_8 mg_tb10">'+v.addTime+'</h6>' +
										'<p class="color_25 mg_top5">' + v.content + '</p>' +
										'<p class="mg_top15"><img width="20" onclick="praiseComment('+v.commentId+')"  class="vertical-align_m mg_r10" src="images/heart.png" alt="" />' + v.praiseNum + '</p>' +
										'</dd>' +
										'</dl>'
								});
								$('.index_pllist').html(html)
							} else {
								$('.index_pllist').html('<p class="text-center">暂无评论</p>')
							}
						} else {  
							msg(res.msg)
						}

					}
				});
			}
			
			
			//关注列表
			function getFocusWork(current) {
				$('.gif').show()
				$.ajax({
					type: "post",
					url: urlcom + "work/getFocusWork",
					//				headers:{'token_access':localStorage.getItem('token')},
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						current: current,
						size: 50
					},
					success: function(res) {
						$('.gif').hide()
						if(res.code == 0) {
							if(res.data.length) {
								$('.num').html(res.data.length)
								var html = '';
								$.each(res.data, function(k, v) {
									html += '<dl class="list_item">' +
										'<a href="detial.html?id=' + v.workId + '" class="width100">' +
										'<dt class="relative">' +
										'<img src="' + v.coverImg + '"/>' +
										'<p class="absolute list_text mui-ellipsis">' + v.content + '</p>' +
										'</dt>' +
										'<dd class="mg_tb10"><img src="images/headimg.png"/>' + v.userName + '</dd>' +
										'</a>' +
										'</dl>'
								});
								$('.my_listitem').html(html)
							} else {
								$('.my_listitem').html('<div class="text-center mg_top20">暂无数据</div>')
							}
						}
					}
				});
			}

			//评论
			function commentWork() {
				var content = $('.index_plinput input').val()
				if(content) {
					$.ajax({
						type: "post",
						url: urlcom + "work/commentWork",
						async: true,
						dataType: 'json',
						data: {
							userId: localStorage.getItem('userId'),
							workId: $('.head_index').attr('workid'),
							content: content
						},
						success: function(res) {
							if(res.code == 0) {
								msg('评论成功')
								$('.index_plinput input').val('')
								getCommentList(1)
							} else {
								msg(res.msg)
							}

						}
					});
				} else {
					msg('请输入~~')
				}
			}
			// 点赞评论
			function praiseComment(id) {
				$.ajax({
					type: "post",
					url: urlcom + "work/praiseComment",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						commentId: id,
					},
					success: function(res) {
						if(res.code == 0) {
							msg('点赞成功')
							getCommentList(1)
						} else {
							msg(res.msg)
						}
					}
				})
			}
			
			//下载扣积分
			function integralDownload(){
				$.ajax({
					type: "get",
					url: urlcom + "/work/integralDownload",
					async: true,
					dataType: 'json',
					data: {
						userId: localStorage.getItem('userId'),
						workId:workId
					},
					success: function(res) {
						if(res.code == 0) {
							msg(res.msg)
						} else {
							msg(res.msg)
						}
				
					}
				});
		    }
				
			
			//判断是否为Trident内核浏览器(IE等)函数
				function browserIsIe() {
				    if (!!window.ActiveXObject || "ActiveXObject" in window){
				        return true;
				    }
				    else{
				        return false;
				    }
				}
				//创建iframe并赋值的函数,传入参数为图片的src属性值.
				function createIframe(imgSrc) {
				    //如果隐藏的iframe不存在则创建
				    if ($("#IframeReportImg").length === 0){
				        $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
				    }
				    //iframe的src属性如不指向图片地址,则手动修改,加载图片
				    if ($('#IframeReportImg').attr("src") != imgSrc) {
				        $('#IframeReportImg').attr("src",imgSrc);
				    } else {
				        //如指向图片地址,直接调用下载方法
				        downloadImg();
				    }
				}
				//下载图片的函数
				function downloadImg() {
					
					//iframe的src属性不为空,调用execCommand(),保存图片
				    if ($('#IframeReportImg').src != "about:blank") {
				        window.frames["IframeReportImg"].document.execCommand("SaveAs");
				    }
				}
				//接下来进行事件绑定
				var aBtn = $(".download");
				aBtn.click(function(){
					integralDownload()
					if (browserIsIe()) {
						//是ie等,绑定事件
					    	var imgSrc =bg
					    	//调用创建iframe的函数
					        createIframe(imgSrc);
					  
					} else {
						aBtn.each(function(i,v){
							//支持download,添加属性.
							var imgSrc = $(".download").attr('downloadurl')
							$(v).attr("download",imgSrc);
							$(v).attr("href",imgSrc);
						})
					}
				})
				
				
				//获取喜好列表
					$('.refire').hide()
					var page =0
					page++
					function like(page){
						console.log(page)
						$.ajax({
							type:"get",
							url:urlcom + "user/getSurveyList",
							async:true,
							dataType:'json',
							success:function(res){
								if(res.code==0){
									var html='';
									console.log(page)
									if(res.data.length==1){
										$.each(res.data, function(k,v) {
											$('.refire').show();
											$('.next').hide();
												html+='<div class="color_55 bold mg_top10 title " id='+v.surveyId+'>'+(k+1)+'. '+ v.title+'</div>'+
												'<div class="like_box mg_top20">'
												$.each(v.options, function(m,n) {
														
														html+='<div class="like_list">'+
													    	'<div class="mui-input-row mui-radio ">'
													        if(v.type==1){
													    	    html+='<label><img src="'+n+'"/></label>'
													        }else if(v.type==2){
													        	  html+='<label>'+n+'</label>'
													        }
													    	  html+='<input name="radio" type="radio" value="'+m+'" >'+
													    	'</div>'+
												    	'</div>'
													
												});
												html+='</div>'
											
										});
									}else if(res.data.length>1){
										
									    $.each(res.data, function(k,v) {
										if(k==page){
											// $('.big_btn').text('提交')
											// 
											if(k==1){
												$('.refire').show();
												$('.next').hide();
											}
											html+='<div class="color_55 bold mg_top10 title " id='+v.surveyId+'>'+(k+1)+'. '+ v.title+'</div>'+
											'<div class="like_box mg_top20">'
											$.each(v.options, function(m,n) {
													
													html+='<div class="like_list">'+
												    	'<div class="mui-input-row mui-radio ">'
												        if(v.type==1){
												    	    html+='<label><img src="'+n+'"/></label>'
												        }else if(v.type==2){
												        	  html+='<label>'+n+'</label>'
												        }
												    	  html+='<input name="radio" type="radio" value="'+m+'" >'+
												    	'</div>'+
											    	'</div>'
												
											});
											html+='</div>'
										}
									});
									}
									page++
									$('#like_box').html(html)
								}
							}
						});
					}like(0)
				    
					
					   
				    //提交喜好
					function likeBtn(){
						var answer = $('input[type=radio]:checked').val()
					
						console.log(answer)
						if(answer==0){
							answer = 'a'
						}else if(answer == 1){
							answer='b'
						}else if(answer == 2){
							answer='c'
						}else if(answer == 3){
							answer='d'
						}
						$('.gif').show()
						$.ajax({
							type:"POST",
							url:urlcom + "user/surveySubmit",
							async:true,
							dataType:'json',
							data:{
								userId:localStorage.getItem('userId'),
								surveyId:$('.title').attr('id'),
								answer:answer
							},
							success:function(res){
							$('.gif').hide()
								if(res.code==0){
									window.localStorage.setItem('isAnswer', 2);//是否回答
									$('.like_mask').fadeOut(200)
									msg('提交成功')
									
								}
							}
					})
				}	
			
		</script>

	</body>

</html>